<template>
  <div class='header-controls flex' @keydown.k='handleOpenModel' tabindex='0'>
    <div class='controls-search' data-dia='search' @click='handleOpenModel'>
      <i class='iconfont icon-search'></i>
    </div>
    <!-- 登录按钮 -->
    <template v-if="userInfo === ''">
      <a class='out tips' @click='openLoginDialog' title='登录'
         role='button'>
        <img src='@/assets/user/user-login.svg' alt='login' class='relative z-30'>
      </a>
    </template>
    <template v-if="userInfo !== ''">
      <Dropdown hover>
        <div class='mr-0'>
          <div class='flex-shrink-0'>
            <div class='rounded-full ring-gray-100 overflow-hidden shaodw-lg w-9'>
              <img class='avatar-img' :src='userInfo.avatar' alt='avatar-img' />
            </div>
          </div>
        </div>
        <DropdownMenu>
          <template v-if='!isMobile'>
            <DropdownItem @click='openUserCenter'>{{ t('settings.personal-center') }}</DropdownItem>
          </template>
          <DropdownItem @click='logout'>{{ t('settings.logout') }}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </template>
  </div>
  <!-- 文章密码验证 -->
  <el-dialog v-model='articlePasswordDialogVisible' width='30%' :fullscreen='isMobile'>
    <el-form @submit.native.prevent @keyup.enter.native='accessArticle'>
      <el-form-item model='userInfo' class='mt-5'>
        <el-input id='article-password-input' v-model='articlePassword' placeholder='文章受密码保护,请输入密码' />
      </el-form-item>
      <el-form-item>
        <el-button type='primary' @click='accessArticle' size='large' class='mx-auto mt-3'>校验密码</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <teleport to='body'>
    <SearchModel />
  </teleport>
</template>

<script lang='ts'>
import {
  computed,
  defineComponent,
  toRef,
  toRefs,
  reactive,
  getCurrentInstance,
  nextTick
} from 'vue'
import { Dropdown, DropdownMenu, DropdownItem } from '@/components/Dropdown'
import { useAppStore } from '@/stores/app'
import { useCommonStore } from '@/stores/common'
import { useUserStore } from '@/stores/user'
import { useRoute, useRouter } from 'vue-router'
import ThemeToggle from '@/components/ToggleSwitch/ThemeToggle.vue'
import SearchModel from '@/components/SearchModel.vue'
import { useSearchStore } from '@/stores/search'
import config from '@/config/config'
import { useI18n } from 'vue-i18n'
import emitter from '@/utils/mitt'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { Iphone, Lock, Message, User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus/es'
import MenuWidget from '@/components/MenuWidget/MenuWidget.vue'
import { userService } from '@/service/user.service'
import { auth } from '@/service/auth.service'

export default defineComponent({
  name: 'Controls',
  computed: {
    User() {
      return User
    },
    Iphone() {
      return Iphone
    },
    Lock() {
      return Lock
    },
    Message() {
      return Message
    }
  },
  components: {
    MenuWidget,
    SvgIcon,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    ThemeToggle,
    SearchModel
  },
  setup() {
    const { t } = useI18n()
    const proxy: any = getCurrentInstance()?.appContext.config.globalProperties
    const appStore = useAppStore()
    const commonStore = useCommonStore()
    const userStore = useUserStore()
    const searchStore = useSearchStore()
    const route = useRoute()
    const router = useRouter()
    const loginInfo = reactive({
      nickName: '' as any,
      username: '' as any,
      password: '' as any,
      code: '' as any
    })
    const reactiveDate = reactive({
      articlePasswordDialogVisible: false,
      articlePassword: '',
      articleId: ''
    })

    const toAgreement = () => {
      router.push({ path: '/agreement' })
    }
    emitter.on('changeArticlePasswordDialogVisible', (articleId: any) => {
      reactiveDate.articlePasswordDialogVisible = true
      reactiveDate.articlePassword = ''
      reactiveDate.articleId = articleId
      nextTick(() => {
        document.getElementById('article-password-input')?.focus()
      })
    })
    const logout = () => {
        userService.loginOut()
    }
    const openUserCenter = () => {
      userStore.userVisible = true
    }
    const openLoginDialog = () => {
      auth.login()
    }

    const handleOpenModel: any = (status: boolean) => {
      searchStore.setOpenModal(status)
    }
    const accessArticle = () => {
      if (reactiveDate.articlePassword.trim().length == 0) ElMessage({ message: '密码不能为空', type: 'warning' })
      else userService.accessArticle(reactiveDate.articleId,reactiveDate.articlePassword).then(()=>{
        reactiveDate.articlePasswordDialogVisible = false
      })
    }
    return {
      handleOpenModel,
      loginInfo,
      ...toRefs(reactiveDate),
      userInfo: toRef(userStore.$state, 'userInfo'),
      isMobile: toRef(commonStore.$state, 'isMobile'),
      logout,
      openUserCenter,
      openLoginDialog,
      accessArticle,
      toAgreement,
      t,
      websiteConfig: computed(() => {
        return appStore.websiteConfig
      }),
    }
  }
})
</script>
<style lang='scss'>
.icon-search:before {
  color: var(--s-color);
}
.my-el-button {
  width: 300px !important;
}

.el-form-item__content .el-button {
  width: 300px;
}

.el-dialog__headerbtn {
  outline: none !important;
}

.el-input-group__append {
  background-color: var(--background-primary-alt) !important;
}

.el-form-item__label {
  text-align: left;
  width: 70px;
  color: var(--text-normal) !important;
}

.el-input__inner {
  color: var(--text-normal) !important;
  background-color: var(--background-primary-alt) !important;
}

.el-input__wrapper {
  background: var(--background-primary-alt) !important;
}
</style>
<style lang='scss' scoped>
.text {
  color: var(--text-normal);
  cursor: pointer;
}

#submit-button {
  outline: none;
  background: #0fb6d6;
}

.header-controls {
  align-items: center;
  justify-content: center;
  gap: var(--gap-divs);

  span {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 250ms ease;
    padding-right: 0.5rem;

    &[no-hover-effect] {
      &:hover {
        opacity: 1;
      }
    }

    &:hover {
      color: var(--color);
    }

    .svg-icon {
      stroke: #fff;
      height: 2rem;
      width: 2rem;
      margin-right: 0.5rem;
      pointer-events: none;
    }
  }

  .search-bar {
    @apply bg-transparent flex flex-row px-0 mr-2 rounded-full;
    opacity: 0;
    width: 0;
    transition: 300ms all ease-out;

    &.active {
      @apply bg-ob-deep-800;
      opacity: 0.95;
      width: 200px;

      input {
        width: initial;
      }
    }

    &:focus {
      appearance: none;
      outline: none;
    }

    input {
      @apply flex flex-1 bg-transparent text-ob-normal px-6 box-border;
      width: 0;
      appearance: none;
      outline: none;
    }

    svg {
      @apply float-right;
    }
  }
}

.avatar-img {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 800ms;
  transform: rotate(-360deg);
}

.avatar-img:hover {
  transform: rotate(360deg);
}
</style>
